/**
 * 自定义select组件
 */
import React, { Component } from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip, Form } from 'antd';
import { FormItemLayout, NoLableLayout } from '../formPub';
import { SelectC } from '../..';
import styles from './index.less';

class RangeSelectC extends Component {
  // props默认值
  static defaultProps = {
    title: '', // 下拉框名称，默认为空（无名称）
    helper: '', // 下拉框提示信息，默认无提示信息
    onRef: () => {},
    formItemLayout: FormItemLayout,
    labalWrap: false, // 默认title不换行
    disabled: false,
    onChange: () => {},
    colon: false,
  };

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);
  }

  handleChange = (e, option) => {
    this.props.onChange(e, option);
    console.log('e', e, option);
  };

  render() {
    const { disabled, labalWrap, styleRow, form, title, dataIndex, dataSource, style, initialValue, helper, formItemLayout } = this.props;
    // const rootStyle = { alignItems: 'center', display: 'flex' };
    const sepStyle = { width: '10%', display: 'flex', alignItems: 'center', lineHeight: '1.5', justifyContent: 'center', fontSize: '18px' };
    return (
      <Form.Item
        className={labalWrap ? 'labalWrap' : ''}
        labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
        wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
        style={style}
        label={
          title ? (
            helper ? (
              <span>
                {title}&nbsp;
                <Tooltip title={helper}>
                  <QuestionCircleOutlined />
                </Tooltip>
              </span>
            ) : (
              <span>{title}</span>
            )
          ) : (
            ''
          )
        }
        colon={false}
      >
        {
          <div className={styles.rootStyle} style={styleRow ? styleRow : null}>
            <Form.Item style={{ width: '45%' }}>
              <SelectC
                form={form}
                dataSource={dataSource && dataSource[0]}
                dataIndex={dataIndex && dataIndex[0]}
                initialValue={initialValue && initialValue[0]}
                optionTitle={true}
                allowClear={true}
                disabled={disabled}
                onChange={this.handleChange}
              />
            </Form.Item>
            <div style={sepStyle}>~</div>
            <Form.Item style={{ width: '45%' }}>
              <SelectC
                form={form}
                dataSource={dataSource && dataSource[1]}
                dataIndex={dataIndex && dataIndex[1]}
                initialValue={initialValue && initialValue[1]}
                optionTitle={true}
                allowClear={true}
                disabled={disabled}
                onChange={this.handleChange}
              />
            </Form.Item>
          </div>
        }
      </Form.Item>
    );
  }
}

// props类型
RangeSelectC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.array, // Form识别的Item ID [开始日期, 结束日期]
  initialValue: PropTypes.array, // 初始默认值 [开始日期, 结束日期]
  onChange: PropTypes.func, // 开始日期或结束日期变化时的回调
  helper: PropTypes.array, // 提示帮助信息 [开始日期, 结束日期]
  // dataType: PropTypes.string, // 日期控件类型（年月日类型：date，年月类型：month）
  dataSource: PropTypes.array, // 数据源
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  disabled: PropTypes.bool, // 禁用
  formItemLayout: PropTypes.object, // 布局
  colon: PropTypes.bool, // 是否展示冒号
};

export default RangeSelectC;
